﻿<div class="container-fluid">
  <h1>Send some basic messages</h1>
  <form class="form-inline" (ngSubmit)="sendMessage()" #messageForm="ngForm">
    <div class="row">
      <div class="col">
        <label class="sr-only" for="message">Message</label>
        <input
          type="text"
          class="form-control"
          id="message"
          placeholder="your message..."
          name="message"
          [(ngModel)]="message"
          required
        />
      </div>
      <div class="col">
        <button
          type="submit"
          class="btn btn-primary"
          [disabled]="!messageForm.valid"
        >
          Send SignalR Message
        </button>
      </div>
    </div>
  </form>
  <div style="padding: 10px"></div>
  <div class="row" *ngIf="messages.length > 0">
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>Messages</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let message of messages; let i = index">
            <td>{{ i + 1 }}</td>
            <td>{{ message }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row" *ngIf="messages.length <= 0">
    <span>No messages</span>
  </div>
</div>
